<template>
  <div>
    <a-modal v-model:visible="visible" :width="1000">
      <template #title>
        <h3>基础信息维护</h3>
      </template>
      <template #footer>
          <a-button key="back" @click="handleCancelClick" class="btn">取消</a-button>
      </template>
      <a-row class="top-title">
        <a-col :span="3">
          <h4>机构名称：</h4>
        </a-col>
        <a-col :span="6">
              <a-tree-select
                  v-model:value="value"
                  show-search
                  style="width: 100%"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  allow-clear
                  tree-default-expand-all
                  :tree-data="powerTreeData"
                  @change="handleSelectedTeam(value)"
              />
            </a-col>
          <a-col :span="3">
            <h4>绝缘工具：</h4>
          </a-col>
          <a-col :span="6">
            <a-select
                  v-model:value="value1"
                  show-search
                  style="width: 100%"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  allow-clear
                  tree-default-expand-all
                  :options="teamTool"
              />
          </a-col>
      </a-row>
    <a-row>
      <a-button type="primary" @click="handleSearchClick(value,value1)" id="searchBtn">查询</a-button>
    </a-row>
    <a-row>
      <a-button key="close" type="primary" @click="handleCustodianClick" class="btn">填写保管人</a-button>
    </a-row>
      <CustodianModal ref="showCustodian" :selectedRecord="selectedRecord" @loadData="loadData"></CustodianModal>
      <a-table :columns="columns" :dataSource="data" :row-selection="rowSelection" class="table"></a-table>
      <!-- <template #footer>
          <a-button key="close" type="primary" @click="handleOk" class="btn">关闭</a-button>
      </template> -->
      </a-modal>
  </div>
</template>

<script setup>
import { reactive, ref, watchEffect } from 'vue';
import CustodianModal from './CustodianModal.vue'
import request from '@/utils/request'

const visible = ref(false);
const showCustodian = ref(null) 
const value1 = ref([])

const props=defineProps(['powerTreeData'])
const value=ref('')
const powerTreeData=ref([])
const teamTool=ref([
{
      value: '绝缘手套',
      label: '绝缘手套',
    }, {
      value: '高压绝缘靴',
      label: '高压绝缘靴',
    }, {
      value: '10kv高压验电器绝缘杆',
      label: '10kv高压验电器绝缘杆',
    }, {
      value: '接地封线绝缘杆',
      label: '接地封线绝缘杆',
    }, {
      value: '高压令克棒',
      label: '高压令克棒',
    }, {
      value: '打冰杆',
      label: '打冰杆',
    }
])

const selectedRecord=ref([])

const columns = [{
title: '车间',
dataIndex: 'workshopName',
key: 'workshopName',
align:'center'
}, {
title: '班组',
dataIndex: 'orgName',
key: 'orgName',
align:'center'
//   width: '12%',
}, {
title: '绝缘工具',
dataIndex: 'name',
//   width: '30%',
key: 'name',
align:'center'
}, {
title: '编号',
dataIndex: 'id',
//   width: '30%',
key: 'id',
align:'center'
}, {
title: '保管人',
dataIndex: 'keeper',
//   width: '30%',
key: 'keeper',
align:'center'
}];
const data = ref([]);

watchEffect(()=>{
  powerTreeData.value=props.powerTreeData
})
const showModal = () => {
  visible.value = true;
  value.value=''
  value1.value=''
  data.value=[]
};
//取消按钮
const handleCancelClick = () => {
  visible.value = false
  value.value=''
  value1.value=''
  data.value=[]
};
const rowSelection = ref({
//   checkStrictly: false,
onChange: (selectedRowKeys, selectedRows) => {
  // selectedKeys.value=selectedRowKeys
  // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
onSelect: (record, selected, selectedRows) => {
  selectedRecord.value=selectedRows
  // console.log(record);
  // console.log( selected);
  console.log(selectedRows);
},
onSelectAll: (selected, selectedRows, changeRows) => {
  console.log(selected, selectedRows, changeRows);
},
});

const loadData=async(val)=>{

  const {orgName,categoryName} = val
  console.log(orgName)
  console.log(categoryName)

  if(categoryName){
    const result = await request({
    url:'/tools/selbyworkshopandtools',
    method:'get',
    params:{
      speciality:2,
      orgName:orgName,
      categoryName:categoryName

      // orgName:'商丘接触网维修工区',
      // categoryName:'验电器'
    }
  })

  data.value=result.data.data.data
  for(var i = 0;i < data.value.length;i++){
    data.value[i].key=i
  }
  }else{
    const result = await request({
    url:'/tools/selbyworkshop',
    method:'get',
    params:{
      speciality:2,
      orgName:orgName,
      // orgName:'商丘接触网维修工区',
    }
  })
  console.log(result)
  data.value=result.data.data.data
  for(var i = 0;i < data.value.length;i++){
    data.value[i].key=i
  }
  }
  
}

//查询按键
const handleSearchClick = async (value,toolValue) => {
  // console.log(value),
  // console.log(toolValue)
//把获取的班组id转为班组名称
  const teamValue=ref([])
    const res = await request.get(`/sys/getSubOrg`)
    teamValue.value=res.data.data
    const name=ref('')
    for(var i=0;i < teamValue.value.length;i++){
        if(value===teamValue.value[i].orgId){
            name.value=teamValue.value[i].orgName
        }
    }
    // const obj={
    //   orgName:name.value,
    //   categoryName:toolValue
    // }
    const obj={
      orgName:name.value,
      categoryName:toolValue
    }
    loadData(obj)
 
} 
//填写保管人
const handleCustodianClick = () => {
  showCustodian.value.showModal()
}
defineExpose({
  showModal,
})

//选择了班组
const handleSelectedTeam= async(value)=>{
  // const teamValue=ref([])
  // const res = await request.get(`/sys/getSubOrg`)
  // teamValue.value=res.data.data

  // const orgName=ref('')
  // for(var i=0;i < teamValue.value.length;i++){
  //     if(value===teamValue.value[i].orgId){
  //       orgName.value=teamValue.value[i].orgName
  //     }
  // }
  // console.log(orgName.value)
  // const result = await request({
  //   url:'/tools/selbyworkshop',
  //   method:'get',
  //   params:{
  //     speciality:1,
  //     orgName:orgName.value
  //   }
  // })
  // console.log(result.data.data.data.length)
  const result = await request({
    url:'/api/quota/optionalTools',
    method:'get',
    params:{
      orgId:value
    }
  })
  // console.log(result)
  teamTool.value=[]
  // for(var i = 0;i < result.data.data.length;i++){
  //   var obj={
  //       value:result.data.data[i].name,
  //       title:result.data.data[i].name,
  //       // key:result.data.data.data[i].id
  //     }
  //   teamTool.value.push(obj)
  // }
  // console.log(teamTool.value)

  //去重
  // for(let i = 0;i < teamTool.value.length;i++){
  //   for(let j = i + 1;j < teamTool.value.length;j ++){
  //     if(teamTool.value[i].value===teamTool.value[j].value){
  //       teamTool.value.splice(j,1)
  //       j--
  //     }
  //   }
  // }
  // console.log(teamTool.value)
}
</script>

<style lang="less" scoped>
  h3{
      display: inline-block;
      font-weight: 900;
  }
  .table{
      padding-top: 20px;
  }
  .btn{
      background-color: #169bd5;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 15px;
      color: white;
      height: 38px;
      width: 100px;
      padding: 0;
  }
  .top-title{
      // padding-bottom: 20px;
  }
#searchBtn{
background-color: #169bd5;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
    color: white;
    height: 38px;
    width: 100px;
    padding: 0;
    margin-top: 20px;
}
</style>